<template>
    <view class="return-books">
        <view class="common-division"/>
        <view class="return-infos common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                <text>收件公司</text>
            </view>
            <view class="admin-edname">
                <input class="common-uni-input"
                       placeholder-style="color: #999;"
                       placeholder="请选择快递公司"
                       @focus="focusHandle"
                       @input="inquiryLogisticsCom"
                       :value="adminEdName"/>
                <view class="compony-list" v-if="isShowCom">
                    <view class="no-data" v-if="!logisticsCom.length">暂无数据</view>
                    <view class="compony-list-item" v-for="item in logisticsCom" :key="item.edId" @tap.stop="changeLogisticsCom(item)">{{item.edName}}</view>
                </view>
            </view>

            <view class="common-title">
                <text class="common-title-line"/>
                <text>物流单号</text>
            </view>
            <input class="common-uni-input" @focus="focusNumHandle" placeholder-style="color: #999;" placeholder="请输入物流单号" v-model="adminEdNum"/>
            <view class="btn-wraps">
                <text class="common-squar-btn" @tap="returnBooks">确认归还</text>
            </view>
        </view>
    </view>
</template>

<script>
    import service from '@/service';
    import { inquiryLogisticsCom } from '@/util/commonFn'
    export default {
        name: "card",
        data(){
            return{
                adminEdNum: '',
                adminEdName: '',
                adminEdCode: '',
                orderId: '',
                isChange: false,
                isShowCom: false,
                timer: null,
                index: 0,
                logisticsCom: []
            }
        },
        onLoad(params){
            let { orderId } = params;
            this.orderId = orderId
        },
        methods: {
            returnBooks(){
                this.handleCode()
                if(!this.adminEdCode || !this.adminEdNum){
                    uni.showToast({
                        title: `${!this.adminEdCode ? '请选择有效的物流公司' : '请填写物流单号'}`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                this.orderShipment()
            },
            // 订单发货
            orderShipment(){
                uni.showLoading({
                    title: ''
                });
                service.mineService.orderShipment({
                    data: {
                        orderId: this.orderId,
                        adminEdNum: this.adminEdNum,
                        adminEdName: this.adminEdCode
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            uni.showToast({
                                title: `归还成功`,
                                duration: 2500,
                                icon: 'none'
                            });
                            uni.navigateBack(-1);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                })
            },
            handleCode(){
                if(this.adminEdName && !this.adminEdCode){
                    this.logisticsCom.forEach(val => {
                        if(val.edName === this.adminEdName) this.adminEdCode = val.edCode
                    })
                }
            },
            focusHandle(){
                this.isShowCom = true;
                this.inquiryLogisticsCom()
            },
            // 查询快递公司
            inquiryLogisticsCom(e){
                if(e) this.adminEdName = e.detail.value
                inquiryLogisticsCom({
                    edName: this.adminEdName
                }).then(result=>{
                    this.logisticsCom = result || []
                })
                this.adminEdCode = '';
                return this.adminEdName
            },
            focusNumHandle(){
                this.isShowCom = false;
            },
            changeLogisticsCom(item){
                let that = this;
                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    that.adminEdName = item.edName
                    that.adminEdCode = item.edCode
                    that.isShowCom = false;
                })

            },
            bindPickerChange(e){
                this.index = e.target.value;
                this.isChange = true;
                this.adminEdName = this.logisticsCom[this.index].edName;
                this.edCode = this.logisticsCom[this.index].edCode;
            }
        }
    }
</script>

<style scoped lang="scss">
    .return-books{
        .common-division{
            height: 32rpx;
        }
        min-height: 100%;
        background: #F9F9F9;
        .return-infos{
            background: #ffffff;
            .admin-edname{
                position: relative;
                height: 88rpx;
                .compony-list{
                    position: absolute;
                    top: 90rpx;
                    right: 0;
                    left: 0;
                    background: #ffffff;
                    z-index: 100;
                    border: 1px dashed #c0c0c0;
                    border-top: none;
                    padding: 20rpx 10rpx;
                    box-sizing: border-box;
                    &-item{
                        line-height: 60rpx;
                        border-bottom: 1px dashed #c0c0c0;
                        padding-left: 10rpx;
                    }
                    .no-data{
                        text-align: center;
                    }
                }
            }
        }
        .btn-wraps{
            display: flex;
            align-items: center;
            height: 222rpx;
        }
    }
</style>